<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/shop.css" type="text/css" rel="stylesheet" />
<link href="css/Sellerber.css" type="text/css"  rel="stylesheet" />
<link href="css/bkg_ui.css" type="text/css"  rel="stylesheet" />
<link href="font/css/font-awesome.min.css"  rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/shopFrame.js" type="text/javascript"></script>
<script src="js/Sellerber.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.dataTables.bootstrap.js"></script>

<!--[if lt IE 9]>
<script src="js/html5shiv.js" type="text/javascript"></script>
<script src="js/respond.min.js"></script>
<script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
  <![endif]-->
<title>产品列表</title>
</head>

<body>
<div class="margin" id="page_style">
<div class="operation clearfix">
<button class="btn button_btn btn-danger" type="button" onclick=""><i class="fa fa-trash-o"></i>&nbsp;删除</button>
<span class="submenu"><a href="javascript:void(0)" name="add_product.html" class="btn button_btn bg-deep-blue" title="添加产品"><i class="fa  fa-edit"></i>&nbsp;添加产品</a></span>
<div class="search  clearfix">
 <label class="label_name">商品搜索：</label><input name="" type="text"  class="form-control col-xs-6"/><button class="btn button_btn bg-deep-blue " onclick=""  type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>

</div>
</div>
<!--列表展示-->
<div class="list_Exhibition margin-sx">
 <table class="table table_list table_striped table-bordered" id="sample-table">
  <thead>
  <tr>
  <th width="30"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
   <th width="100">产品编号</th>
   <th>产品名称</th>
   <th width="100">浏览</th>
   <th width="120">产品现价</th>
   <th width="100">分类</th>
   <th width="100">数量</th>
   <th width="150">添加日期</th>
   <th width="100">状态</th>
   <th width="220">操作</th>
   </tr>   
  </thead>
  <tbody>
   <tr>
   </tr>
  </tbody>
 </table>
</div>
</div>
<div class="add_Carousel_figure" id="add_Carousel_figure" style=" display:none">
  <table class="table table_list table_striped table-bordered">
   <thead>
    <tr>
      <th width="30"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
     <th  width="50">排序</th>
     <th width="100">图片</th>
     <th>尺寸</th>
     <th>大小</th>
     <th>上传时间</th>
     <th>操作</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td width="30"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
     <td>1</td>
     <td><img src="../products/ad.jpg"  width="100px" height="80px"/></td>
     <td>450x470</td>
     <td>234KB</td>
     <td>2016-08-21</td>
     <td>
      <a href="javascript:ovid()">删除</a>
      <a href="javascript:ovid()">修改</a>
     </td>
    </tr>
      <tr>
     <td width="30"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
     <td>2</td>
     <td><img src="../products/p_55.jpg"  width="100px" height="80px"/></td>
     <td>450x470</td>
     <td>234KB</td>
     <td>2016-08-21</td>
     <td>
      <a href="javascript:ovid()">删除</a>
      <a href="javascript:ovid()">修改</a>
     </td>
    </tr>
   </tbody>
  </table>
  <div class="list_carousel" id="Upload">
  <div class="title_name"><i></i>添加轮播图</div>
      <button type="button" class="add_Upload bg-deep-blue" id="add_Upload" onclick="add_Upload()"><i class="fa  fa-plus"></i></button>
    <div class="images_Upload clearfix margin-bottom" id="images_Upload">
      <span class="Upload_img"><input name="" type="file" /></span>
      <a href="javascript:ovid()" class="operating delete_Upload" onclick="delete_Upload(this.id)"><i class="fa fa-remove"></i></a>
      <a href="javascript:ovid()" class="operating" title="预览" onclick="preview_img(this.id)"><i class="fa  fa-image"></i></a>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
//设置框架
 $(function() { 
	$("#page_style").frame({
		float : 'left',
		menu_nav:'.operation',
		color_btn:'.skin_select',
	});
});
$(document).ready(function(){
    var spotMax = 8;
  if($('#add_Carousel_figure .table tbody tr').size() >= spotMax) {$(obj).hide();}
  $("#add_Upload").on('click',function(){ 
       var cid =$('.images_Upload').each(function(i){ $(this).attr('id',"Uimages_Upload_"+i)});
       addSpot(this, spotMax, cid);
  });
});
function addSpot(obj, sm ,sid) {
	  $("#Upload").append("<div class='images_Upload clearfix margin-bottom' id='"+sid+"'>"+
	  "<span class='Upload_img'><input name='' type='file' /></span>"+
	  "<a href='javascript:ovid()' class='operating delete_Upload'><i class='fa fa-remove'></i></a>"+
	  "<a href='javascript:ovid()' class='operating' onclick='preview_img(this.id)'><i class='fa  fa-image'></i></a>"+
	  "</div>&nbsp;")  
	.find(".delete_Upload").click(function(){
		if($('div.images_Upload').size()==1){
			layer.msg('请至少保留一张图片!',{icon:0,time:1000});			
			}
			else{
				 $(this).parent().remove();
                 $('#add_Upload').show();
				} 				
				
  });
  if($('.delete_Upload').size() >= sm) {$(obj).hide();layer.msg('当前为最大图片添加量!',{icon:0,time:1000});}}
var dataSet=[
    ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1233', '贝德玛（Bioderma）温和卸妆水净妍/舒妍洁肤液卸妆水','55','234.50','促销化妆品','4567','2016-03-12 10:34:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,"10001")" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,"123")" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,'+10001+')" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+232+'))" class="btn bg-deep-blue operation_btn">图片</a>'],
	   ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1563', '欧诗漫 OSM 奢华金萃臻贵娇宠礼盒','55','234.50','促销化妆品','4567','2016-03-12 12:23:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,'+10001+')" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,"123")" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,"10001")" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+121+')" class="btn bg-deep-blue operation_btn">图片</a>'],
	      ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1343', '舒蕾洗发水奢养精油套装','55','234.50','促销化妆品','4567','2016-03-12 12:23:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,'+10001+')" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,"123")" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,"10001")" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+234+')" class="btn bg-deep-blue operation_btn">图片</a>'],
		       ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1343', '雅芳小黑裙香体乳150g','555','234.50','促销化妆品','4567','2016-03-12 12:23:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,'+10001+')" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,"123")" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,"10001")" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+134+')" class="btn bg-deep-blue operation_btn">图片</a>'],
			        ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1311', '嘉媚乐（CAMENAE）玫瑰之爱保','343','234.50','促销化妆品','4567','2016-03-12 12:23:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,'+10001+')" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,"123")" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,"10001")" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+254+')"" class="btn bg-deep-blue operation_btn">图片</a>'],
	          ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1234', '欧莱雅男士护肤套装 劲能极速活肤液50ml','5445','234.50','新品发布','4567','2016-03-12 12:23:12','<span class="label label-success label-sm">上架</span>',' <a href="javascript:ovid()" onclick="picture_stop(this,'+10023+')" class="btn bg-green operation_btn">下架</a> <a href="javascript:ovid()" onclick="picture_edit(this,'+123+')" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,'+10001+')" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+234+')" class="btn bg-deep-blue operation_btn">图片</a>'],      
			   ['<label><input type="checkbox" class="ace"><span class="lbl"></span></label>','1211', '美即 面膜 净透亮肤套装面膜贴升级版','4555','234.50','新品发布','4567','2016-03-12 12:23:12','<span class="label label-Shelf label-sm">下架</span>','<div class="td-manage"> <a href="javascript:ovid()" onclick="picture_stop(this,'+10001+')" class="btn bg-green operation_btn">上架</a> <a href="javascript:ovid()" onclick="picture_edit(this,'+123+')" class="btn bg-deep-blue operation_btn">修改</a> <a href="javascript:ovid()" onclick="picture_del(this,'+10001+')" class="btn btn-danger operation_btn">删除</a> <a href="javascript:ovid()" onclick="picture_img(this,'+234+')" class="btn bg-deep-blue operation_btn">图片</a></div>'],
	  
	  ];			  
			jQuery(function($) {
				var oTable1 = $('#sample-table').dataTable( {
				"data": dataSet,
				"width":"100%",	
				"bLengthChange":false,
				"iDisplayLength": 20,
				"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		        "bStateSave": true,//状态保存
				"searching": false,
		        "aoColumnDefs": [{"orderable":false,"aTargets":[0,8,9]}]
			   });
								
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			});

/***********图片查看**********/
function picture_img(ojb,id){
	 layer.open({
        type: 1,
        title: '产品轮播图',
		maxmin: true, 
		shadeClose:false, //点击遮罩关闭层
        area : ['800px' , '400px'],
        content:$('#add_Carousel_figure'),
		btn:['提交','取消'],
	 });
	}
	/*产品-删除*/
function picture_del(obj,id){
	layer.confirm('确认要删除吗？',{icon:0,},function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
/*商品-停用*/
function picture_stop(obj,id){
	layer.confirm('确认要下架吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn bg-gray operation_btn" onClick="picture_start(this,id)" href="javascript:;" title="上架">上架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}

/*商品-启用*/
function picture_start(obj,id){
	layer.confirm('确认要上架吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn bg-green operation_btn" onClick="picture_stop(this,id)" href="javascript:;" title="下架">下架</a>');
		$(obj).parents("tr").find(".radius").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已上架!',{icon: 6,time:1000});
	});
}
/*********滚动事件*********/
$("#page_style").niceScroll({  
	cursorcolor:"#888888",  
	cursoropacitymax:1,  
	touchbehavior:false,  
	cursorwidth:"5px",  
	cursorborder:"0",  
	cursorborderradius:"5px"  
});

 $(document).ready(function(){
	var ReturnWindow=$('#contents', parent.document); 
	var width = ReturnWindow.css("width");
	 $("#sample-table").css({"width":width-20+"px"});
	  $('#sample-table').location.replace(location.href);
	 });
</script>
